<template>
  <div class="layout-content">
    <el-table
      ref="multipleTable"
      :data="
        tableData.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        class="selection"
        align="center"
      />
      <el-table-column label="模型" prop="img" width="100px" align="center">
        <template #default="scope">
          <img :src="scope.row.img" alt="" style="margin: 0 auto" />
        </template>
      </el-table-column>
      <el-table-column label="日期" width="110px" prop="date" />
      <el-table-column label="描述" prop="des" min-width="150px" />
      <el-table-column label="模型名字" prop="name" width="100px" />
      <el-table-column label="作者" prop="name" width="80px" />
      <el-table-column label="状态" prop="name" width="190px" align="center">
        <template #default="scope">
          <el-space size="5px">
            <el-tag
              v-show="scope.row.state"
              closable
              @close="handleWeekClose(scope.$index, tableData)"
              >周推荐</el-tag
            >
            <el-tag
              v-show="scope.row.state2"
              type="success"
              closable
              @close="handleRecommendClose(scope.$index, tableData)"
              >喜欢推荐</el-tag
            >
          </el-space>
        </template>
      </el-table-column>
      <el-table-column align="right" width="230px">
        <template #header>
          <el-input v-model="search" size="mini" placeholder="Type to search" />
        </template>
        <template #default="scope">
          <el-button size="mini">查看</el-button>

          <el-popconfirm
            confirm-button-text="喜欢推荐"
            cancel-button-text="周推荐"
            confirmButtonType="success"
            cancelButtonType="Primary"
            hide-icon
            title="设置标签"
            @confirm="setLikedRecommend(scope.$index, scope.row)"
            @cancel="setWeekRecommend(scope.$index, scope.row)"
          >
            <template #reference>
              <el-button type="info" size="mini">设置</el-button>
            </template>
          </el-popconfirm>

          <!-- <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="info"
            >设置</el-button
          > -->

          <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="red"
            title="设置标签"
            @confirm="handleDelete(scope.$index, tableData)"
            @cancel="cancelEvent(scope.$index, tableData)"
          >
            <template #reference>
              <el-button type="danger" size="mini">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div class="table-bottom">
      <el-button
        size="medium"
        type="info"
        :disabled="setButtonState"
        class="setButton"
        @click="selectWeekAllcc"
        >周推荐</el-button
      >
      <el-button
        size="medium"
        type="info"
        :disabled="setLikedButtonState"
        class="setLikedButton"
        @click="selectLikedAllcc"
        >喜欢推荐</el-button
      >
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.limit"
          layout="prev, pager, next"
          :total="100"
        >
        </el-pagination>
      </div>
    </div>
    <Dialog
      :flag="dialogFlag"
      :tableList="currentTableList"
      @close="closeDialog"
      @submit="sureDialogInfo"
    />
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import Dialog from "@/components/dialog.vue";
import fac from "@/assets/images/face.jpg";
export default {
  name: "publish_module",
  components: { Dialog },
  setup() {
    const search = ref("");
    const total = ref("100");
    const setButtonState = ref(false);
    const setLikedButtonState = ref(false);
    const sureButtonstate = ref(false);
    const listLoading = ref(false);
    const dialogVisible = ref(false);
    // 获取用户的选中
    const multipleSelection = ref("");
    // 弹窗flag
    // true、false
    const dialogFlag = ref(false);

    const listQuery = reactive({
      page: 1,
      limit: 20,
      importance: undefined,
      title: undefined,
      type: undefined,
      sort: "+id",
    });
    const tableData = reactive([
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: true,
        state2: true,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: false,
        state2: true,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: true,
        state2: true,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: false,
        state2: true,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: true,
        state2: false,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: false,
        state2: false,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state: true,
        state2: false,
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        img: fac,
        date: "2016-05-01",
        des: "这是一个模型啊啊啊",
        name: "Jessy",
        maker: "Tom",
        state2: false,
        state: false,
        address: "No. 189, Grove St, Los Angeles",
      },
    ]);
    const currentTableList = reactive({
      rows: "",
      number: "",
      which: "",
    });

    function handleDelete(index, rows) {
      rows.splice(index, 1);
    }

    function cancelEvent(index, rows) {
      console.log("取消了");
    }

    function handleSizeChange(val) {
      listQuery.limit = val;
    }
    function handleCurrentChange(val) {
      listQuery.page = val;
    }

    // 关标签
    function closeDialog() {
      dialogFlag.value = false;
    }
    function sureDialogInfo(tableListInfo) {
      dialogFlag.value = false;
      // 关闭对应的周推荐或者喜欢推荐
      if (tableListInfo.which == "week") {
        tableListInfo.rows[tableListInfo.number].state = false;
      }
      if (tableListInfo.which == "liked") {
        tableListInfo.rows[tableListInfo.number].state2 = false;
      }
    }
    const handleWeekClose = (index, rows) => {
      dialogFlag.value = true;
      currentTableList.rows = rows;
      currentTableList.number = index;
      currentTableList.which = "week";
      // rows[index].state = false;
    };
    function handleRecommendClose(index, rows) {
      dialogFlag.value = true;
      currentTableList.rows = rows;
      currentTableList.number = index;
      currentTableList.which = "liked";
      // rows[index].state2 = false;
    }

    // 设置标签
    function setLikedRecommend(index, rows) {
      rows.state2 = true;
    }
    function setWeekRecommend(index, rows) {
      rows.state = true;
    }

    // 判断是否有选中项
    function handleSelectionChange(value) {
      console.log(value.length);
      multipleSelection.value = value;
      // if (multipleSelection.value.length >= 1) {
      //   setButtonState.value = false;
      //   console.log('11111111111')
      // }else {
      //   setButtonState.value = true;
      //         console.log('2222222222')
      // }
    }

    // 多选操作周推荐
    function selectWeekAllcc() {
      multipleSelection.value.forEach((item) => {
        item.state = true;
      });
    }

    function selectLikedAllcc() {
      multipleSelection.value.forEach((item) => {
        item.state2 = true;
      });
    }

    return {
      // 常量
      search,
      setButtonState,
      listLoading,
      setLikedButtonState,
      dialogFlag,
      dialogVisible,
      sureButtonstate,
      total,
      multipleSelection,
      // 对象
      tableData,
      listQuery,
      currentTableList,

      // 方法

      handleDelete,
      handleSizeChange,
      handleWeekClose,
      handleRecommendClose,
      closeDialog,
      sureDialogInfo,
      setLikedRecommend,
      setWeekRecommend,
      cancelEvent,
      handleSelectionChange,
      selectWeekAllcc,
      selectLikedAllcc,
    };
  },
};
</script>
<style lang="scss">
// .pagination-container {
//   margin-top: 50px;
// }
.layout-content {
  .table-bottom {
    position: relative;
    margin-top: 50px;
    .setButton {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;

      width: 100px;
      text-align: center;
    }
    .setLikedButton {
      position: absolute;
      top: 0;
      left: 110px;
      display: flex;
      justify-content: center;

      width: 100px;
      text-align: center;
    }
    .pagination-container {
      padding-top: 10px;
    }
  }
}
</style>